<template>
	<div class="historyLoan">
		<el-table class="order-table" :data="tableData" style="width: 100%" empty-text="暂无搜索结果" @filter-change="filterChange()">
			<el-table-column prop="orderNo" label="订单编号" width="200">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="100">
			</el-table-column>
			<el-table-column prop="type" label="车型" width="180">
			</el-table-column>
			<el-table-column prop="code" label="车牌号" width="150">
			</el-table-column>
			<el-table-column prop="bank" label="贷款银行" :filters="$store.state.bank" :filter-method="filterbank" filter-placement="bottom-end" width="150">
			</el-table-column>
			<el-table-column prop="money" label="贷款金额" width="100">
			</el-table-column>
			</el-table-column>
			<el-table-column prop="status" label="状态" :filters="$store.state.orderStatus" :filter-method="filterTag" filter-placement="bottom-end" width="180">
				<template scope="scope">
					<el-tag v-if="scope.row.status == '征信结果待录入' || scope.row.status == '征信结果已录入'||scope.row.status == '修改征信结果待录入' || scope.row.status == '修改征信结果已录入'|| scope.row.status == '审核中'|| scope.row.status == '垫款审核中'" :type="'primary'">{{scope.row.status}}</el-tag>
					<el-tag v-else-if="scope.row.status == '已结清' || scope.row.status == '贷款申请通过' || scope.row.status == '财务已垫款' || scope.row.status == '银行已放款'" :type="'success'">{{scope.row.status}}</el-tag>
					<el-tag v-else-if="scope.row.status == '贷款审核未通过'||scope.row.status == '垫款驳回'" :type="'danger'">{{scope.row.status}}</el-tag>
					<el-tag v-else-if="scope.row.status == '已作废'||scope.row.status == '已撤回'" :type="'gray'">{{scope.row.status}}</el-tag>
					<el-tag v-else>{{scope.row.status}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="time" label="申请时间" sortable min-width="180">
			</el-table-column>
		</el-table>
		<div class="order-pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="tablePage.page" :page-sizes="[10, 20, 30, 40]" :page-size="tablePage.num" layout="sizes, prev, pager, next" :total="tablePage.pager">
			</el-pagination>
		</div>
	</div>
	</div>
</template>
<script>
export default {
	name: 'historyLoan',
	data() {
		return {
			customerIdCard: '',
			orderNo: '',
			filter: {
				bank: '',
				status: '',
				bankList: [],
				statusList: [],
			},
			tableData: [],
			tablePage: {
				pager: 1, //总页数
				page: 1, //当前页数
				num: 10, //每页条数
			},
		}
	},
	methods: {
		filterbank(value, row) {
			let q = false;
			for (var i = 0; i < this.filter.bankList.length; i++) {
				if (this.filter.bankList[i] == value) {
					q = true;
					return;
				};
			}
			if (!q) {
				this.filter.bankList.push(value);
			}
			this.filter.bank = value;
			return row.bank === this.$libs.jsonGetName(this.$store.state.bank, value);
		},
		filterTag(value, row) {
			console.log(value);
			let q = false;
			for (var i = 0; i < this.filter.statusList.length; i++) {
				if (this.filter.statusList[i] == value) {
					q = true;
					return;
				};
			}
			if (!q) {
				this.filter.statusList.push(value);
			}
			this.filter.status = value;
			return row.status === this.$libs.jsonGetName(this.$store.state.orderStatus, value);
		},
		filterChange() {
			this.getDate(this.orderNo);
			this.filter.statusList = [];
			this.filter.bankList = [];
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.tablePage.num = val;
			this.getDate();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.tablePage.page = val;
			this.getDate();
		},
		getDate(_id, _cb, _cb2) {
			this.orderNo = _id;
			let param = {
				orderStatus: this.filter.statusList.length > 1 ? '' : this.filter.status,
				orderStatusList: this.filter.statusList.length > 1 ? this.filter.statusList.join('%2C') : '',
				loanBankId: this.filter.bankList.length > 1 ? '' : this.filter.bank,
				loanBankIdList: this.filter.bankList.length > 1 ? this.filter.bankList.join('%2C') : '',
				pageNO: this.tablePage.page,
				pageSize: this.tablePage.num,
				customerIdCard: this.customerIdCard,
				orderNo: _id
			};
			this.tableData = [];
			this.$http.get(this.$libs.getUrlSplit("/loaninfo/history", param)).then((response) => {
				if (response.data.success) {
					this.tablePage.pager = parseInt(response.data.totalPage) + 1;
					this.tablePage.num = parseInt(response.data.pageSize) + 1;
					this.tableData = [];
					if (response.data.data && response.data.data.result) {
						for (var i = 0; i < response.data.data.result.length; i++) {
							let el = response.data.data.result[i];
							this.tableData.push({
								orderNo: el.orderNo,
								name: el.customerName,
								code: el.licensePlateNo,
								type: el.carModel,
								bank: el.loanBankName,
								money: el.loanAmount,
								phone: el.mobilePhone,
								status: el.orderStatusDesc,
								time: el.gmtCreate
							});
						}

					}
					console.log('this.tableData:-' + this.tableData);
					if (_cb && (!response.data.data || !response.data.data.result || (response.data.data && response.data.data.result && response.data.data.result.length == 0))) {
						_cb();
					} else if (_cb2) {
						_cb2();
					}
				} else {
					if (_cb2) {
						_cb2();
					}
				}
			}).catch((error) => {});
		}
	},
	mounted() {

	}
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.historyLoan {
	.order-table {
		margin: 20px 0px;
	}
	.order-pagination {
		text-align: center;
	}
	a {
		color: #20a0ff;
	}
}

</style>
